<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>cloud-home</title>
		<meta name="description" content="" />
		<meta name="author" content="hello" />
		<!-- stylesheet import-->
		<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
		<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css" />
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/table.css" />
		<style type="text/css">
		  	body{
		  		padding-top: 80px;
		  		padding-bottom:60px;
		  	}
  		</style>
	</head>
	<body>
		<div class="navbar navbar-fixed-top">
	      <div class="navbar-inner">
	        <div class="container">
	          <a class="brand">Cloud Service Center</a>
	          <div class="nav-collapse">
	            <ul class="nav">
	              <li class="active"><a href="#">Home</a></li>
	              <li><a href="about.html">About</a></li>
	              <li><a href="contact.html">Contact</a></li>
	            </ul>
	            <ul class="nav" style="float: right">
	              <li class="active"><a id="user"></a></li>
	              <li><a href="index.html">logout</a></li>
	            </ul>
	          </div><!--/.nav-collapse -->
	        </div>
	      </div>
	    </div>
	
	    <div class="container">
	    	<div class="row">
	            		<ul class="nav nav-tabs">
						  <li class="active"><a href="#booking_form" data-toggle="tab">Booking Form</a></li>
						  <li><a href="#inter_form" data-toggle="tab">Interchange Receipt</a></li>
						  <li><a href="#shipinfo" data-toggle="tab">Shipment Information</a></li>
						  <li><a href="#bill" data-toggle="tab">Issue Bill Of Lading</a></li>
						</ul>
	              		<div class="tab-content">
	              			<div id="booking_form" class="tab-pane active">
	              				<div class="span10">
	              					<div class="span4">
	              							<input class="btn btn-primary" type="button" id="query_book" value="Query Booking Form"> 
	              							<table id="booking_table" class="tablesorter"> 
												<thead> 
													<tr> 
														<th>Id</th>
														<th>Shipper</th> 
														<th>Consignee</th> 
													</tr> 
												  </thead> 
													<tbody> 
															
													</tbody>
												<!-- 	<tbody tabindex="0"></tbody> -->
											</table>
	              						<div class="span4 div-form">
	              							<table class="table_detail" width="500" height="500" border="1">
											  <tr>
											    <td colspan="4">
											    	<label>Shipper</label>
											    	<span id="book_shipper"></span>
											    </td>
											    <td colspan="4">
											    	<label>No</label>
											    	<input id="book_no" type="text"/>
											    </td>
											  </tr>
											  <tr>
											    <td colspan="4">
											    	<label>Consignee</label>
											    	<span id="book_con"></span>
											    </td>
											    <td colspan="3">
											    	<label>Notify Party</label>
											    	<span id="book_notify"></span>
											    </td>
											  </tr>
											  <tr>
											    <td colspan="3">
											    	<label>Place of receipt</label>
											    	<span id="book_place"></span>
											    </td>
											    <td colspan="3">
											    	<label>Port of loading</label>
											    	<span id="book_load"></span>
											    </td>
											  </tr>
											  <tr>
											    <td colspan="3">
											    	<label>Ocean vessel</label>
											    	<span id="book_ocean"></span>
											    </td>
											    <td>
											    	<label>Port of discharge</label>
											    	<span id="book_dis"></span>
											    </td>
											    <td colspan="2">
											    	<label>Place of Delivery</label>
											    	<span id="book_del"></span>
											    </td>
											  </tr>
											  <tr>
											    <td colspan="6"><label>PARTICULARS FURNISHED BY SHIPPER</label></td>
											  </tr>
											  <tr>
											    <td>
											    	<label>Marks & Numbers</label>
											    	<span id="book_mn"></span>
											    </td>
											    <td>
											    	<label>No. Of pkgs</label>
											    	<span id="book_np"></span>
											    </td>
											    <td colspan="2">
											    	<label>Type of package & description of goods</label>
											    	<span id="book_td"></span>
											    </td>
											    <td>
											    	<label>Gross WT.(KGS)</label>
											    	<span id="book_gw"></span>
											    </td>
											    <td>
											    	<label>Measurement (M3)</label>
											    	<span id="book_m3"></span>
											    </td>
											  </tr>
											</table>
											<input id="book_confirm" style="margin-top:5px;margin-left:150px" type="button" class="btn btn-primary" value="Confirm"/>
											<input id="book_refuse" class="help-inline"  type="button" class="btn" value="Refuse"/>
	              						</div>
	              					</div>
					    		</div>
	              			</div>
	              			<div id="inter_form" class="tab-pane">
	              				<div class="span10" style="height: 400px;">
					    			<form>
	              							<table class="table">
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>COMPANY</label></td>
	              									<td><input name="company" id="company"  type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>NO</label></td>
	              									<td><input name="no" id="no"  type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>CONTAINER USER/HAULIER</label></td>
	              									<td><input name="cuser" id="cuser" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>PLACE OF DELIVERY</label></td>
	              									<td><input name="pod" id="pod" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>DELIVERED TO</label></td>
	              									<td><input name="dt" id="dt" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>PLACE OF RETURN</label></td>
	              									<td><input name="por" id="por" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>VESSEL/VOYZGE NO.</label></td>
	              									<td><input name="vess" id="vess" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>CONTAINER NO.</label></td>
	              									<td><input name="cno" id="cno" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>SIZE/TYPE</label></td>
	              									<td><input name="size" id="size" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>CNTR. OPTR.</label></td>
	              									<td><input name="optr" id="optr" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>SEAL NO.</label></td>
	              									<td><input name="seal" id="seal" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>TRUCK, WAGON, WARGE NO.</label></td>
	              									<td><input name="truck" id="truck" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>PPS OF GATE-OUT/STATUS</label></td>
	              									<td><input name="pout" id="pout" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>PPS OF GATE-INSTATUS</label></td>
	              									<td><input name="pin" id="pin" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>TIME-OUT</label></td>
	              									<td><input name="timeout" id="timeout" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>SHIPPING AGENT EMAIL</label></td>
	              									<td><input name="sagentEmail" id="sagentEmail" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td></td>
	              									<td><input id="iter_send" type="button" class="btn btn-primary" value="send"></td>
	              								</tr>
	              							</table>
	              						</form>
					    		</div>
	              			</div>
	              			<div id="shipinfo" class="tab-pane">
	              				<div class="span10" style="height: 400px;">
					    			<input class="btn btn-primary" type="button" id="query_cfd" value="Query Confirmed Orders"> 
            						<table id="cfd_table" class="tablesorter"> 
										<thead> 
											<tr>
												<th>No</th> 
												<th>Shipper</th> 
												<th>Ocean Vessel</th> 
												<th>Port Of Loading</th>
												<th>Shipping Agent Email</th>
											</tr> 
										  </thead> 
											<tbody>
											</tbody>
										<!-- 	<tbody tabindex="0"></tbody> -->
									</table>
					    		</div>
					    		<div class="modal hide fade" id="sendinfo">
								  <div class="modal-header">
								    <a class="close" data-dismiss="modal">×</a>
								    <h3>SHIPPING INFORMATION</h3>
								  </div>
								  <div class="modal-body">
								  Send <span id="mno"></span>  to : <span id="sam"></span><br />
								  <textarea rows="4" cols="20" id="info_area"></textarea>
								  </div>
								  <div class="modal-footer">
								    <a href="#" id="lacancel" class="btn">Cancel</a>
								    <a href="#" id="lasend" class="btn btn-primary">Send</a>
								  </div>
								</div>
	              			</div>
	              			<div id="bill" class="tab-pane">
	              				<div class="span10" style="height: 400px;">
					    			<form>
	              							<table class="table">
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>COMPANY</label></td>
	              									<td><input id="bill_com" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>CONSIGNEE</label></td>
	              									<td><input id="bill_con" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>NAME</label></td>
	              									<td><input id="bill_name" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>ADDRESS</label></td>
	              									<td><input id="bill_addr" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>BANK</label></td>
	              									<td><input id="bill_bank" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>ACCOUNT</label></td>
	              									<td><input id="bill_account" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>VESSEL</label></td>
	              									<td><input id="bill_vess" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>VOYAGE</label></td>
	              									<td><input id="bill_voy" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>PORT OF LOADING</label></td>
	              									<td><input id="bill_pol" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>PORT OF DESTINATION</label></td>
	              									<td><input id="bill_pod" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>BILL NO</label></td>
	              									<td><input id="bill_no" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>DELIVERING PROVISION</label></td>
	              									<td><input id="bill_dp" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>OCEAN FREIGHT</label></td>
	              									<td><input id="bill_ocean" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>PLACE OF UNLOADING</label></td>
	              									<td><input id="bill_pou" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>ARRIVAL DATE</label></td>
	              									<td><input id="bill_ad" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>INTO YARD DATE</label></td>
	              									<td><input id="bill_iyd" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>MARK & NO.</label></td>
	              									<td><input id="bill_mark" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>NAME OF CARGO</label></td>
	              									<td><input id="bill_cargo" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>QUANTITY</label></td>
	              									<td><input id="bill_quantity" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>WEIGHT(K.G.)</label></td>
	              									<td><input id="bill_kg" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>VOLUME(M3)</label></td>
	              									<td><input id="bill_vol" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td style="width:100px;text-align:right"><label>EMAIL OF AGENT</label></td>
	              									<td><input id="bill_agentemail" type="text"></td>
	              								</tr>
	              								<tr>
	              									<td></td>
	              									<td><input id="bill_send" type="button" class="btn btn-primary" value="send"></td>
	              								</tr>
	              							</table>
	              						</form>
					    		</div>
	              			</div>
	              		</div>
	            	</div>
	    </div> <!-- /container -->
	    
	    <!-- JavaScript at the bottom for fast page loading -->

		  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
		  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		  <script src="js/libs/jquery-1.7.1.min.js"></script>
		<!-- import bootstrap-->
		<script src="bootstrap/js/bootstrap.js"></script>
		<script src="js/home.js"></script>
		<script src="js/libs/jquery.dataTables.min.js"></script>
		<script src="test/test.js"></script>
	</body>
</html>
